<script setup>
defineProps({
  /** 自定义 */
  value: { type: [String, Number], default: '' },
  options: { type: Array, default: () => [] },
  option: {
    type: Object,
    default: () => ({
      label: 'label',
      value: 'value'
    })
  },
  isEnum: Boolean,
  isItem: Boolean,
  /** ElementPlus */
  placeholder: { type: String, default: '请选择' },
  size: { type: String, default: 'default' },
  disabled: Boolean,
  clearable: Boolean,
  filterable: Boolean,
  multiple: Boolean,
  multipleLimit: { type: Number, default: 0 },
  reserveKeyword: { type: Boolean, default: true },
  collapseTags: Boolean,
  collapseTagsToolTip: Boolean,
  maxCollapseTags: { type: Number, default: 1 },
  valueKey: { type: String, default: 'value' },
  placement: { type: String, default: 'bottom-start' },
  popperClass: { type: String, default: '' },
  loading: Boolean,
  loadingText: { type: String, default: '加载中...' },
  noMatchText: { type: String, default: '暂无数据' },
  noDataText: { type: String, default: '暂无数据' },
  remote: Boolean,
  remoteMethod: { type: Function, default: () => null }
})
const emit = defineEmits(['change', 'visible-change'])

const change = (value) => {
  emit('change', value)
}
const visibleChange = (value) => {
  emit('visible-change', value)
}
</script>

<template>
  <el-select
    :model-value="value"
    :placeholder="placeholder"
    :size="size"
    :disabled="disabled"
    :clearable="clearable"
    :filterable="filterable"
    :multiple="multiple"
    :multiple-limit="multipleLimit"
    :reserve-keyword="reserveKeyword"
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsToolTip"
    :max-collapse-tags="maxCollapseTags"
    :value-key="valueKey"
    :placement="placement"
    :popper-class="popperClass"
    :loading="loading"
    :loading-text="loadingText"
    :no-match-text="noMatchText"
    :no-data-text="noDataText"
    :remote="remote"
    remote-show-suffix
    :remote-method="remoteMethod"
    @change="change"
    @visible-change="visibleChange"
  >
    <!-- 枚举类型 -->
    <template v-if="isEnum">
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item"
        :value="index"
        :disabled="item.disabled"
      ></el-option>
    </template>
    <!-- 数组 -->
    <template v-else>
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item[option.label]"
        :value="isItem ? item : item[option.value]"
        :disabled="item.disabled"
      ></el-option>
    </template>
  </el-select>
</template>
